import PlayCount from 'components/PlayCount'
import React, { FC, memo } from 'react'
import styles from './style.module.css'
interface IProps {
  name: string
  artistName: string
  playCount: number
  picUrl: string
  copywriter: string
}
const MVItem: FC<IProps> = memo((data) => {
  const { name, picUrl, playCount, copywriter, artistName } = data
  return (
    <div className={styles.root}>
      <div className={styles.pic}>
        <img src={picUrl} loading='lazy' />
        <PlayCount count={playCount} className={styles.playCount} />
        <div className={styles.copywriter}>{copywriter}</div>
      </div>
      <div className={styles.name}>{name}</div>
      <div className={styles.artistName}>{artistName}</div>
    </div>
  )
})
export default MVItem
